<template>
  <div class="discounts-header">
    <el-row class="discounts-header-container">
      <el-col :span="12" class="left">
        <span class="title">优惠活动</span>
        <span>共收录{{companyNum}}家娱乐城，{{discountsNum}}条优惠信息</span>
      </el-col>
      <el-col :span="12" class="right">
        我是娱乐城，我要
        <span class="release-btn" @click="showRelease = true">发布优惠信息</span>
      </el-col>
    </el-row>

    <discounts-release v-if="showRelease" @close="closeRelease"></discounts-release>
  </div>
</template>

<script>
import DiscountsRelease from './Release.vue';

export default {
  name: 'DiscountsHeader',
  props: {
    companyNum: {
      type: Number,
      default: 0
    },
    discountsNum: {
      type: Number,
      default: 0
    }
  },
  components: {
    DiscountsRelease
  },
  data() {
    return {
      showRelease: false
    };
  },
  methods: {
    closeRelease() {
      this.showRelease = false;
    }
  },
  created() {
    console.log(this);
  }
};
</script>

<style lang="less" scoped>
  .discounts-header-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    height: 50px;
    border: 1px solid #ddd;
    color: #666;
    background-color: #eee;
    .left {
      display: flex;
      align-items: center;
      .title {
        margin: 0 15px 0 30px;
        font-size: 30px;
        color: green;
      }
    }
    .right {
      padding-right: 20px;
      text-align: right;
      font-size: 16px;
      .release-btn {
        color: green;
        cursor: pointer;
      }
    }
  }
</style>
